<template>
  <div>
    <div @click="applynewadd()">
      <slot><el-button type="primary">添加菜单</el-button></slot>
    </div>
    <MyDialog
      :title="editItem ? '编辑菜单' : '添加菜单'"
      :visible.sync="addSwitch"
      size="small"
      @beforeClose="close_add"
    >
      <el-form
        ref="khadd"
        :model="queryParam"
        :rules="ywkrules"
        label-width="110px"
        class="demo-ruleForm"
      >
        <div style="padding: 23px 0px 0 0px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="菜单:" prop="is_menu">
                <el-radio-group v-model="queryParam.is_menu">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="父级:" prop="pid">
                <el-cascader
                  v-model="queryParam.pid"
                  style="width: 100%"
                  :options="menu_list"
                  :props="{
                    emitPath: false,
                    checkStrictly: true,
                    value: 'id',
                    label: 'name',
                  }"
                  clearable
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="菜单名称:" prop="name">
                <el-input
                  v-model="queryParam.name"
                  maxlength="10"
                  style="width: 100%"
                  show-word-limit
                  clearable
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="路径:" prop="path">
                <el-input
                  v-model="queryParam.path"
                  style="width: 100%"
                  show-word-limit
                  clearable
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="图标:" prop="icon">
                <el-input
                  v-model="queryParam.icon"
                  style="width: 100%"
                  clearable
                  placeholder="请输入"
                  @input="change"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="排序:" prop="sort">
                <el-input
                  v-model="queryParam.sort"
                  style="width: 100%"
                  type="number"
                  show-word-limit
                  clearable
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="submit_apply">保 存</el-button>
        <el-button @click="close_add">取 消</el-button>
      </template>
    </MyDialog>
  </div>
</template>
<script>
  import MyDialog from '@/components/Dialog'
  import { addMenu, editMenu, permissionList, allMenu } from '@/api/admin.js'
  export default {
    components: {
      MyDialog,
    },
    data() {
      return {
        queryParam: {
          is_menu: '',
          pid: '',
          name: '',
          path: '',
          sort: '',
          icon: '',
        },
        addSwitch: false,
        loading: false,
        uploadList: false,
        ywkrules: {
          path: [{ required: true, message: '请填写路径', trigger: 'blur' }],
          is_menu: [
            { required: true, message: '请选择菜单', trigger: 'change' },
          ],
          name: [{ required: true, message: '请填写名称', trigger: 'blur' }],
        },
        editItem: {},
        menu_list: [],
      }
    },
    computed: {},
    watch: {},
    created() {},
    methods: {
      async getAllMenu() {
        let data = await allMenu()
        if (data.code == 1) {
          this.menu_list = data.data
        }
      },
      applynewadd(item) {
        this.getAllMenu()
        this.addSwitch = true
        this.uploadList = false
        this.editItem = ''
        this.queryParam = {
          is_menu: '',
          pid: '',
          name: '',
          path: '',
          sort: '',
        }
        if (item) {
          // 编辑
          this.editItem = item
          let { is_menu, name, pid, path, icon, sort } = item
          let queryParam = {
            is_menu,
            pid,
            name,
            path,
            icon,
            sort,
          }
          this.$nextTick(() => {
            Object.assign(this.queryParam, queryParam)
          })
        }
      },
      change(e) {
        this.$forceUpdate()
      },
      submit_apply() {
        this.$refs['khadd'].validate(async (valid) => {
          if (valid) {
            this.loading = true
            let params = this.queryParam
            let data
            if (this.editItem) {
              params.id = this.editItem.id
              data = await editMenu(params)
            } else {
              data = await addMenu(params)
            }
            if (data.code == 1) {
              this.$baseMessage('操作成功', 'success')
              this.uploadList = true
              setTimeout(() => {
                this.close_add()
              }, 500)
            }
            this.loading = false
          } else {
            return false
          }
        })
      },
      close_add() {
        this.$refs['khadd'].resetFields()
        this.$nextTick(() => {
          this.$emit('close', this.uploadList)
          this.addSwitch = false
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .upload-box {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #c0ccda;
    cursor: pointer;
  }
  .live-style-item {
    float: right;
    color: #8492a6;
    font-size: 13px;
    max-width: 200px;
  }

  .bind-box {
    padding: 0 0 20px;
  }

  .bind-box-table {
    padding: 0 0 20px;
  }

  .footer {
    text-align: center;
    padding: 10px 0 45px;

    & > :nth-child(n + 2) {
      margin-left: 14px;
    }

    button {
      width: 106px;
      height: 48px;
    }
  }
</style>
